<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      function fn(cb) {
        setTimeout(() => {
          console.log("执行fn");
          // console.log("执行了后续操作");
          cb && cb();
        }, 1000);
      }
      // 1.回调函数
      fn(function () {
        console.log("执行了异步之后的代码");
      });
      // 2.promise来解决异步问题
      function fn() {
        return new Promise((res) => {
          setTimeout(() => {
            console.log("执行fn");
            // console.log("执行了后续操作");
            res();
          }, 1000);
        });
      }
      fn().then(() => {
        console.log("执行了异步之后的代码");
      });
      // 3.观察者模式 ：多个对象间 互相影响 ，一个对象发生改变会触发另外的对象改变；
      // 1.延迟执行 （解决异步问题）2.一对多
      document.addEventListener("click", function () {
        console.log("点击了111");
      });
      document.addEventListener("click", function () {
        console.log("点击45646");
      });
      let sf = {
        name: "影魔",
        fn() {
          console.log("魂之挽歌");
        },
      };
      let jugg = {
        name: "剑圣",
        fn1() {
          console.log("无敌斩");
        },
      };
      // 1.收集多种方法 2.延迟执行多次方法
      // 观察者模式 （自定义事件）;
      class Observe {
        constructor() {
          this.handles = {}; //存被观察的方法；
        }
        addevent(eventN, fn) {
          if (typeof this.handles[eventN] == "undefined") {
            this.handles[eventN] = [];
          }
          this.handles[eventN].push(fn);
        }
        // 触发事件 trigger  , dispath
        trigger(eventN) {
          this.handles[eventN].forEach((fn) => {
            fn();
          });
        }
      }
      // 一个对象
      let obj = new Observe();
      obj.addevent("myclick", sf.fn);
      obj.addevent("myclick", jugg, fn1);
      setTimeout(() => {
        obj.trigger("myclick");
      }, 2000);

      let eventObj = new Observe();
      function fn() {
        setTimeout(() => {
          console.log("执行了fn函数");
          //         // console.log("执行了后续操作");
          //         EventObj.trigger("myevent");
        }, 1000);
      }
      // EventObj.addEvent("myevent", function () {
      //     console.log("异步执行完成之后需要执行的代码");
      // })
      // fn();
      // js原生的自定义事件
      // EventTarget  自定义事件 类；
      let eventO = new EventTarget();
      function fn() {
        setTimeout(() => {
          console.log("执行了fn函数");
          // console.log("执行了后续操作");
          // EventObj.trigger("myevent");
          // 触发自定义事件
          eventO.dispatchEvent(new CustomEvent("myevent"));
        }, 1000);
      }
      eventO.addEventListener("myevent", function () {
        console.log("异步之后需要执行的代码");
      });
      fn();
    </script>
  </body>
</html>
